<template>
	<view class="flex-col page">
		<view class="flex-col group mt-9">
			<view class="flex-row justify-between items-center section">
				<view class="flex-row items-center" @click="goSelectAddress">
					<image class="image_2" src="/static/icons/location.png" />
					<view class="flex-col items-start ml-17" v-if="defaultAddress.address">
						<text class="font text">{{defaultAddress.contact}},{{defaultAddress.phone}}</text>
						<text class="font_2 text_2 mt-9">{{defaultAddress.district}}{{defaultAddress.address}}</text>
					</view>
					<view v-else style="font-size: 28rpx; color: #888;">
						您未添加收货地址，请点此前往添加
					</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="flex-row items-center section_2 mt-7">
				<view class="flex-row flex-1">
					<image class="shrink-0 image_4" :src="product.meta.imageUrl" />
					<view class="flex-col justify-center flex-1 group_2">
						<view style="font-size: 28rpx;">
							{{product.name}}
						</view>
						<text class="font text_5">￥{{product.price?product.price.toFixed(2):'0.00'}}</text>
					</view>
					<view>
						<text style="padding: 30rpx 0; font-size: 28rpx;">库存:{{product.stock}}</text>
						<view style="padding-top: 10rpx;">
							<u-number-box v-model="formData.quantity" :min="1" :max="product.stock"
								button-size="30"></u-number-box>
						</view>

					</view>

				</view>

			</view>
			<view class="flex-col section_3 mt-7">
				<view class="flex-row justify-between items-center self-stretch group_3">
					<text class="font_2 text_6">积分</text>
					<text class="font_2 text_6" style="font-weight: normal;">{{(product.pv*formData.quantity)}}</text>
				</view>
				<view class="flex-row justify-between items-center self-stretch group_3"
					style="padding: 0 ;padding-bottom: 30rpx">
					<text class="font_2 text_6">商品总额</text>
					<text class="font_2 text_7">￥{{(product.price*formData.quantity).toFixed(2)}}</text>
				</view>
				<view class="flex-col  ">
					<u-textarea v-model="formData.remark" customStyle="background-color: #f2f2f2"
						placeholder="请在此填写订单备注"></u-textarea>

				</view>
				<view style="margin-top: 76rpx;">
					<text class="self-center text_9">请在{{getDate()}}之前完成付款至所属店铺</text>

				</view>
				<view style="margin-top: 20rpx;">
					<text class="self-center text_9">店铺: {{userinfo.shop.nickname}} 电话: {{userinfo.shop.mobile}}</text>
				</view>

				<u-gap :height="40"></u-gap>
				<button type="primary" :disabled="submited" @click="submit"
					style="margin: 20px; font-size: 32rpx; background-color: #ff0101; border-radius: 30px;">提交订单</button>
			</view>
		</view>
		<u-toast ref="utoast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {},
				defaultAddress: {},
				formData: {
					quantity: 1,
					remark: "",
				},
				product: {},
				submited: false,
			};
		},
		onLoad(options) {
			if (options.id) {
				console.log(options.id)
				this.getProduct(options.id);
			}
		},
		onShow() {
			let token = this.$store.state.userToken;

			if (token) {
				this.userinfo = this.$store.state.userInfo;
				console.log(this.userinfo)
				this.getMemberAddress()

			} else {
				uni.navigateTo({
					url: '/pages-publics/login/login'
				})
			}

		},

		methods: {
			goSelectAddress() {
				uni.navigateTo({
					url: '/pages-users/address/address?source=1'
				})
			},


			submit() {
				if (this.submited) {
					return;
				}
				this.submited = true;
				if (!this.formData.recipientId) {
					uni.showToast({
						title: '请选择收货地址'
					});
					this.submited = false;
					return;
				}
				if (this.formData.quantity <= 0) {
					uni.showToast({
						title: '至少购买一件商品'
					});
					this.submited = false;
					return;
				}
				this.$Utils.SubscribeMessage('Z0YEDsIgJu_fC-pHHoGRp2JepGGLaIVHIbXLyNeer0U', () => {
					this.doPost();
				})
			},
			doPost() {
				this.$post({
					url: `${this.$Utils.ApiUrl}/orders`,
					data: this.formData
				}).then(res => {
					console.log(res)

					uni.setStorageSync("@orders_liangpin", res)
					this.$refs.utoast.show({
						message: "订单创建成功",
						complete() {
							uni.redirectTo({
								url: '/pages-orders/create/createSuccess'
							})
						}
					})


				})
			},
			getDate() {
				let myDate = new Date();
				myDate.setDate(myDate.getDate() + 1)
				return this.$Utils.formatDate(myDate, 'yyyy-MM-dd 18:00')
			},
			getProduct(id) {
				this.$get({
					url: `${this.$Utils.ApiUrl}/products/${id}`,
					data: {

					}
				}).then(res => {
					console.log(res)
					this.product = res;
					this.$set(this.formData, 'productId', this.product.id)

				})
			},
			getMemberAddress() {
				if (uni.getStorageSync("select_address")) {
					this.defaultAddress = uni.getStorageSync("select_address");
					this.$set(this.formData, 'recipientId', this.defaultAddress.id)
					uni.removeStorageSync("select_address")
				} else {
					this.$get({
						url: `${this.$Utils.ApiUrl}/recipients`,
						data: {

						}
					}).then(res => {
						if (res.length > 0) {
							let tmp = res.filter(x => {
								return x.asDefault
							})
							if (tmp.length == 0) {
								this.defaultAddress = res[0]
							} else {
								this.defaultAddress = tmp[0]
							}
							this.$set(this.formData, 'recipientId', this.defaultAddress.id)

						} else {
							this.defaultAddress = {};
						}

						console.log(res)
					})
				}

			}
		},
	};
</script>

<style scoped lang="scss">
	.mt-9 {
		margin-top: 15.7rpx;
	}

	.ml-17 {
		margin-left: 29.65rpx;
	}

	.ml-23 {
		margin-left: 40.12rpx;
	}

	.mt-7 {
		margin-top: 12.21rpx;
	}

	.page {
		padding-bottom: 258.14rpx;
		background-color: #f2f2f2;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.image {
			width: 100vw;
			height: 25.5814vw;
		}

		.group {
			padding: 0 17.44rpx;

			.section {
				padding: 47.09rpx 27.91rpx;
				background-color: #ffffff;
				border-radius: 17.44rpx;

				.image_2 {
					width: 83.72rpx;
					height: 83.72rpx;
				}

				.text {
					color: #333333;
					line-height: 29.11rpx;
					font-weight: bold;
				}

				.text_2 {
					color: #666655;
					font-size: 28rpx;
					word-wrap: break-word;
					width: 70vw;
				}

				.image_3 {
					width: 62.79rpx;
					height: 62.79rpx;
				}
			}

			.section_2 {
				padding: 27.91rpx 3.49rpx 27.91rpx 27.91rpx;
				background-color: #ffffff;
				border-radius: 17.44rpx;

				.image_4 {
					border-radius: 8.72rpx;
					width: 139.53rpx;
					height: 139.53rpx;
				}

				.group_2 {
					margin: 6.98rpx 0;

					.text_3 {
						color: #575757;
						padding: 10rpx 10rpx;
						font-size: 32rpx;
						overflow: hidden;
					}

					.text_4 {
						padding: 20rpx 10rpx;
						color: #808080;
						line-height: 26.76rpx;
					}

					.text_5 {
						margin-left: 6.98rpx;
						margin-top: 13.95rpx;
						color: #ff0101;
						line-height: 23.83rpx;
					}
				}

				.image_5 {
					width: 195.35rpx;
					height: 71.51rpx;
				}
			}

			.font_2 {
				font-size: 24.42rpx;
				font-family: SourceHanSansCN;
			}

			.font {
				font-size: 31.4rpx;
				font-family: SourceHanSansCN;
			}

			.section_3 {
				padding: 0 24.42rpx 76.74rpx 34.88rpx;
				background-color: #ffffff;
				border-radius: 17.44rpx;

				.group_3 {
					padding: 48.84rpx 0 38.37rpx;

					.text_6 {
						color: #555555;
						line-height: 22.66rpx;
						font-size: 28rpx;
					}

					.text_7 {
						color: #ff0101;
						line-height: 18.54rpx;
						font-size: 38rpx;
					}
				}

				.text-wrapper {
					margin-right: 6.98rpx;
					padding: 17.44rpx 20rpx;
					background-color: #ffffff;
					border-radius: 8.72rpx;
					border-left: solid 1.74rpx #bfbfbf;
					border-right: solid 1.74rpx #bfbfbf;
					border-top: solid 1.74rpx #bfbfbf;
					border-bottom: solid 1.74rpx #bfbfbf;

					.text_8 {
						margin-left: 20.93rpx;
						color: #999999;
						line-height: 22.57rpx;
					}
				}

				.text_9 {
					color: #e33c64;
					font-size: 27.91rpx;
					font-family: SourceHanSansCN;
					font-weight: 700;
					line-height: 33.14rpx;
				}

				.text-wrapper_2 {
					margin-top: 160.47rpx;

					background-color: #ff0101;
					border-radius: 33.14rpx;
					width: 331.4rpx;
					font-size: 28rpx;
					padding: 5rpx;
					line-height: 1.5em;

					.text_10 {
						color: #ffffff;
						line-height: 22.73rpx;
					}
				}
			}
		}
	}
</style>